<script setup lang="ts">
import { Icon, Image } from 'view-ui-plus'
import router from '@/router'
import { useUserStorage } from '@/stores/user.ts'

const userStorage = useUserStorage()
//登录
const isLogin = userStorage?.isLogin

//路由跳转
const goPage = (name: string) => {
  router.push({
    // name: name,
    path: name,
  })
}

const loginHandle = () => {
  if (!isLogin) {
    goPage('/login')
  }
}
</script>

<template>
  <transition name="move-enter">
    <div class="nav">
      <!--头像-->
      <div class="nav-left nav-height">
        <div @click="loginHandle">
          <Image
            class="nav-left-avatar"
            src="https://blogxcl52888.oss-cn-shenzhen.aliyuncs.com/blog/images/1728831563194.jpg"
          >
            <template v-slot:error>
              <Icon type="ios-image-outline" size="28" />
            </template>
          </Image>
        </div>
      </div>

      <!-- 导航菜单-->
      <div class="nav-menu nav-height">
        <ul>
          <li class="nav-menu-item" @click="goPage('/')">
            <h2> 首页 </h2>
          </li>
          <li class="nav-menu-item">
            <h2> 音乐 </h2>
          </li>
          <li class="nav-menu-item" @click="goPage('chat')">
            <h2> 聊天 </h2>
          </li>
          <li class="nav-menu-item" @click="goPage('video')">
            <h2> 视频 </h2>
          </li>
          <li class="nav-menu-item" @click="goPage('about')">
            <h2> 关于我 </h2>
          </li>
        </ul>
      </div>

      <!-- 搜索-->
      <!--      <div class="nav-search nav-height">-->
      <!--        <transition name="move-up">-->
      <!--          <div v-show="!searchVisible">-->
      <!--            &lt;!&ndash; 这里可以放天气插件 &ndash;&gt;-->
      <!--            天气插件-->
      <!--          </div>-->
      <!--        </transition>-->
      <!--        <div v-show="searchVisible">-->
      <!--          &lt;!&ndash;搜索框&ndash;&gt;-->
      <!--          <Input v-model="searchVisible" placeholder="搜索" />-->
      <!--        </div>-->
      <!--      </div>-->

      <!-- 图标 搜索 随机 -->
      <div class="nav-icon nav-height">
        <IconFont icon="search" :size="24" class="nav-icon-item" />
        <IconFont icon="train" :size="24" class="nav-icon-item" />
        <IconFont icon="signal" :size="24" class="nav-icon-item" />
      </div>

      <div class="nav-mobile-menu">
        <Icon type="md-menu" size="40" style="cursor: pointer; margin-top: 10px" />
      </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.nav {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: white;

  .nav-left {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-left-avatar {
      display: block;
      width: 60px;
      height: 60px;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .nav-search {
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-menu {
    width: 38%;
    display: flex;
    justify-content: center;
    align-items: center;

    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
      font-size: 12px;
      letter-spacing: 3px;

      .nav-menu-item {
        height: 60px;
        margin-left: 30px;
        cursor: pointer;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        white-space: nowrap;

        h2 {
          padding: 3px 5px 3px 8px;
          border-radius: 20px;
          font-weight: bold;
        }

        h2:hover {
          background-color: blue;
          color: white;
        }
      }
    }
  }

  .nav-mobile-menu {
    display: none;
    margin-right: 20px;
  }

  .nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 添加 gap 属性，让菜单项之间有间距 */
    margin-right: 40px;

    .nav-icon-item {
      padding: 5px;
      line-height: 24px;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 1s;
    }

    .nav-icon-item:hover {
      color: white;
      background-color: blue;
    }
  }

  .nav-height {
    height: 70px;
  }
}

@media screen and (max-width: 768px) {
  .nav {
    .nav-menu {
      display: none;
    }

    .nav-icon {
      display: none;
    }

    .nav-mobile-menu {
      display: block;
    }
  }
}
</style>
